<template>
  <div>
    我是news组件
    <ul class="list">
      <li v-for="(item,key) in list">
          <!--   注意:动态数据要用冒号绑定，下面动态加一个item就是动态数据     -->
        <router-link :to="'/content?canShu001='+item.aid">{{key}}---{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>

export default {
  data() {
    return{list:[111,222,333,444]}
  }, methods:{
    requestData(){
      let api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
      //vue-resource 就是下面的$http已经在main.js中全局引入了
      this.$http.jsonp(api).then(function (res){
          this.list=res.body.result;
        this.dyt2(this.list,"New请求开始打印","News请求结束打印")
      },function (err){
        this.dyn(err)
      })
    }
  },mounted(){
      this.requestData();
  }
}
</script>

<style lang="scss" scoped>
.button1{
  width:100px;
  height: 50px;
}
.list{
  li{
    height:5rem;
    line-height: 2.4rem;//字的行高
    border-bottom: 1rem solid #eee;
    font-size: 1.6rem;
    a{
      color: #666;
      text-decoration: none;
    }
  }
}
</style>
